<template>
	<view>
		<!-- banner轮播 -->
		<view class="banner">
			<u-swiper :list="banner" keyName="image" :autoplay="true" :circular="true" height="300" radius="0">
			</u-swiper>
		</view>
		<view class="header" :class="slideHeight==1?'header-active':'header-navbar'"
			:style="{backgroundColor:'rgba(255, 255, 255, '+slideHeight+')'}">
			<view class="title">
				<!-- #ifndef MP-ALIPAY -->
				<view class="text">{{applet.app_name}}</view>
				<!-- #endif -->
				<view class="region">
					{{position.city}}
					<view class="icons">
						<u-icon name="arrow-down-fill" :color="slideHeight==1?'':'#ffffff'" size="10"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="form-tools">
			<view class="title">
				<view class="hm-dis-block-inline hm-m-r-10">
					<u-icon name="hourglass-half-fill" color="#999999" size="16"></u-icon>
				</view>
				预计<text>1分钟</text>内接单，附近有3位骑手
			</view>
			<view class="tools">
				<!-- tab选项 -->
				<u-tabs @click="cTab" :list="tabs" lineWidth="20" lineHeight="7"
					:lineColor="`url() 100% 100%`"
					:activeStyle="{
				        color: '#ff6900',
				        fontWeight: 'bold',
				        transform: 'scale(1.05)'
				    }" :inactiveStyle="{
				        color: '#606266',
				        transform: 'scale(1)'
				    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;">
				</u-tabs>
				<!-- 帮我送 -->
				<view v-if="tabs_index==0">
					<view class="hm-p-lr-20 hm-m-t-20">
						<view v-if="address.start" class="input-msg" @click="goTo('user/address/add?from=start')">
							<view class="input-doc-b input-doc-msg"></view>
							<view class="detail u-line-1">{{address.start.address}}</view>
							<view class="phone">{{address.start.phone}}</view>
						</view>
						<view v-else class="input-box" @click="goTo('user/address/add?from=start')">
							<view class="input-doc-b"></view>
							请输入取货地址
						</view>
						<view class="input-right" @click="goTo('user/address/index?from=start')">地址簿</view>
					</view>
					<view class="hm-p-lr-20 hm-m-t-20">
						<view class="input-box" @click="goTo('user/address/add?from=receive')">
							<view class="input-doc-r"></view>
							请输入收货地址
						</view>
						<view class="input-right" @click="goTo('user/address/index?from=receive')">地址簿</view>
					</view>
				</view>
				<!-- 帮我取 -->
				<view v-if="tabs_index==1">
					<view class="hm-p-lr-20 hm-m-t-20">
						<view v-if="address.start" class="input-msg" @click="goTo('user/address/add?from=start')">
							<view class="input-doc-b input-doc-msg"></view>
							<view class="detail u-line-1">{{address.start.address}}</view>
							<view class="phone">{{address.start.phone}}</view>
						</view>
						<view v-else class="input-box" @click="goTo('user/address/add?from=start')">
							<view class="input-doc-b"></view>
							请输入收货地址
						</view>
						<view class="input-right" @click="goTo('user/address/index?from=start')">地址簿</view>
					</view>
					<view class="hm-p-lr-20 hm-m-t-20">
						<view class="input-box" @click="goTo('user/address/add?from=receive')">
							<view class="input-doc-r"></view>
							请输入取货地址
						</view>
						<view class="input-right" @click="goTo('user/address/index?from=receive')">地址簿</view>
					</view>
				</view>
			</view>
		</view>
		<view class="hm-p-lr-20">
			<view class="hm-p-20 hm-bg-f hm-br-18">
				<view class="hm-p-b-20 hm-font-b hm-font-32">取送服务流程</view>
				<u-grid :border="false" col="4">
					<u-grid-item @click="">
						<view class="qusong-item">
							<image :src="applet.domain+'/addons/pt/applet/icon1.png'"></image>
							<view class="icons">
								<u-icon name="play-right-fill" color="#bbb"></u-icon>
							</view>
							<view class="hm-col-content hm-font-26 hm-col-tips">填取送信息</view>
						</view>
					</u-grid-item>
					<u-grid-item @click="">
						<view class="qusong-item">
							<image :src="applet.domain+'/addons/pt/applet/icon2.png'"></image>
							<view class="icons">
								<u-icon name="play-right-fill" color="#bbb"></u-icon>
							</view>
							<view class="hm-col-content hm-font-26 hm-col-tips">支付跑腿费</view>
						</view>
					</u-grid-item>
					<u-grid-item @click="">
						<view class="qusong-item">
							<image :src="applet.domain+'/addons/pt/applet/icon3.png'"></image>
							<view class="icons">
								<u-icon name="play-right-fill" color="#bbb"></u-icon>
							</view>
							<view class="hm-col-content hm-font-26 hm-col-tips">骑手取送件</view>
						</view>
					</u-grid-item>
					<u-grid-item @click="">
						<view class="qusong-item">
							<image :src="applet.domain+'/addons/pt/applet/icon4.png'"></image>
							<view class="hm-col-content hm-font-26 hm-col-tips">签收完成</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="hm-p-lr-20 hm-m-t-20">
			<view class="hm-p-20 hm-bg-f hm-br-18">
				<view class="hm-p-b-20 hm-font-b hm-font-32">优惠活动</view>
				<view class="preferential">
					<view class="pre-left">
						<image :src="applet.domain+'/addons/pt/applet/ad1.png'"></image>
					</view>		
					<view class="pre-right">
						<view class="item">
							<image :src="applet.domain+'/addons/pt/applet/ad2.png'"></image>
						</view>
						<view class="item hm-m-t-20">
							<image :src="applet.domain+'/addons/pt/applet/ad3.png'"></image>
						</view>
					</view>	
				</view>
			</view>
		</view>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
		<u-popup :show="authBox" zIndex="900000" mode="center" round="10">
			<view class="hm-popup">
				<view class="hm-p-b-20 hm-border-b">权限设置</view>
				<view class="hm-p-20 hm-col-tips hm-text-center">
					你未开启获取位置权限！
				</view>
				<view class="hm-p-lr-b25">
					<u-button type="success" openType="openSetting" text="去开启"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const App = getApp();
	import config from '@/config.js';
	export default {
		data() {
			return {
				applet: {domain:config.domain},
				address:{},
				slideHeight: false,
				transparency: 0, //透明度
				banner: [],
				tabs: [{
					name: '帮我送',
					value: 10
				}, {
					name: '帮我取',
					value: 20
				}, {
					name: '帮我买',
					value: 30,
					disabled: true,
					badge: {
						value: '敬请期待',
						shape: 'horn',
					}
				}],
				tabs_index: 0,

				position: {}, //用户位置详情
				authBox: false, //位置授权弹窗
			};
		},
		props: {},
		async onLoad(options) {
			let _this = this;
			// #ifndef H5
			await _this.$onLaunched; //等待onLaunch执行完毕
			// #endif
			_this.applet = App.getApplet();
			// #ifdef MP-ALIPAY
			uni.setNavigationBarTitle({
				title: _this.applet.app_name
			});
			// #endif
			_this.getIndexData(); // 获取首页数据
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		async onShow() {
			let _this = this;
			// #ifndef H5
			await _this.$onLaunched; //等待onLaunch执行完毕
			// #endif
			_this.getAddress();
		},
		onPullDownRefresh() {
			let _this = this;
			uni.startPullDownRefresh();//开启下拉刷新动画
			_this.applet = App.getApplet();
			_this.slideHeight = false;
			_this.transparency = 0; //透明度
			_this.getAddress();
			_this.getIndexData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(e) {
			// 页面滚动触发事件的处理函数
			const slideHeight = parseFloat(e.scrollTop.toFixed(0)); // 滑动距离
			if (slideHeight >= 50) {
				this.slideHeight = 1;
			} else {
				if (slideHeight <= 5) {
					this.slideHeight = 0;
				} else {
					let h = slideHeight / 50;
					this.slideHeight = parseFloat(h.toFixed(1))
				}
			}
		},
		onShareAppMessage: function() {
			let _this = this;
			return {
				title: _this.applet.app_name,
				imageUrl: _this.applet.navbar.params.share_image,
				path: "/pages/index/index?recommender=" + App.getUserId()
			};
		},
		methods: {
			/**
			 * 获取地址数据
			 */
			getAddress: function() {
				let _this = this,
				address = App.getAddress();
				if(address.pages == 'checkout'){
					let order_mode = _this.tabs[_this.tabs_index].value;
					_this.goTo('order/checkout?order_mode='+order_mode);
				}
				if(address.pages == 'index'){
					address.pages = '';
					address.receive = null;
					uni.setStorageSync('address', address);
				}
				_this.address = address;
			},
			
			/**
			 * 获取首页数据
			 */
			getIndexData: function() {
				let _this = this;
				App._get('index/page', {}, function(result) {
					_this.banner = result.data.banner;
				});
				// #ifdef MP-WEIXIN || APP-PLUS
				let systemSetting = uni.getSystemSetting();
				if (!systemSetting.locationEnabled) {
					App.showError('手机定位模块未开启');
					return false;
				}
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						_this.authBox = false; //授权弹窗
						_this.getLocation(); //获取位置
					},
					fail() {
						_this.authBox = true;
					}
				})
				// #endif
				// #ifdef H5 || MP-ALIPAY
				_this.getLocation(); //获取位置
				// #endif
			},

			/**
			 * 获取位置
			 */
			getLocation: function() {
				let _this = this;
				// #ifdef MP-ALIPAY
				my.getLocation({
					type: 1,
					adVersion: '2022Q2',
					success: function(res) {
						let location = res.latitude + ',' + res.longitude;
						uni.setStorageSync('location', location);
						//获取区县信息
						_this.position = res;
						uni.setStorageSync('position', res);
					}
				});
				// #endif
				// #ifndef MP-ALIPAY
				uni.getLocation({
					type: 'gcj02', //坐标类型
					isHighAccuracy: true, //开启高精度
					success: function(res) {
						let location = res.latitude + ',' + res.longitude;
						uni.setStorageSync('location', location);
						//获取区县信息
						App._get('index/getLocation', {
							location
						}, function(result) {
							_this.position = result.data;
							uni.setStorageSync('position', result.data);
						});
					}
				});
				// #endif
			},
			/**
			 * 点击tab项
			 */
			cTab: function(e) {
				let _this = this;
				if (e.index == 2) {
					return false;
				}
				_this.tabs_index = e.index;
			},
			
			/**
			 * 页面跳转
			 */
			goTo: function(url) {
				App.goTo(url);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.preferential{
		.pre-left{
			float: left;
			display: inline-block;
			width: 325rpx;
			height: 500rpx;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 15rpx;
			}
		}
		.pre-right{
			display: inline-block;
			width: 325rpx;
			height: 500rpx;
			.item{
				height: 240rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
		}
	}
	.header {
		position: fixed;
		display: flex;
		left: 0rpx;
		top: 0rpx;
		height: 180rpx;
		width: 100%;
		z-index: 999999;
		.title {
			width: 100%;
			margin-top: 70rpx;
			text-align: center;
			padding-left: 40rpx;
			line-height: 150rpx;
			font-weight: 900;
			.text{
				float: left;
				display: block;
			}
			.region{
				display: inline-block;
				margin-left: -150rpx;
				font-weight: normal;
				line-height: 50rpx;
				padding: 0rpx 15rpx;
				border-radius: 30rpx;
				.icons{
					display: inline-block;
					margin-left: 10rpx;
				}
			}
		}
	}

	.header-navbar {
		color: #fff;
		.title{
			.text{
				font-size: 36rpx;
			}
			.region{
				font-size: 26rpx;
				background-color: rgba(255, 255, 255, 0.3);
			}
		}
	}
	.header-active {
		color: #000;
		.title{
			.text{
				font-size: 36rpx;
			}
			.region{
				font-size: 26rpx;
				border: 1rpx solid #f3f4f6;
			}
		}
	}

	.form-tools {
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		/*position: absolute;*/
		position: relative;
		top: -25rpx;
		width: 710rpx;
		padding: 0rpx 20rpx;
		background-image: linear-gradient(#FFF3F2, #f3f4f6);

		.title {
			color: #999999;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 26rpx;

			text {
				color: #ff9900;
			}
		}

		.tools {
			box-shadow: 0 10rpx 10rpx 0 #C0C0C0;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			padding: 20rpx 10rpx;
			.input-msg {
				float: left;
				display: inline-block;
				width: 79%;
				height: 110rpx;
				padding-left: 30rpx;
				line-height: 110rpx;
				.detail{
					padding-top: 20rpx;
					line-height: normal;
				}
				.phone{
					line-height: normal;
					font-size: 26rpx;
					color: #909193;
				}
			}
			.input-doc-msg{
				float: left;
				margin-top: 50rpx;
			}
			.input-box {
				float: left;
				display: inline-block;
				background-color: #f3f4f6;
				width: 79%;
				height: 110rpx;
				line-height: 110rpx;
				padding-left: 30rpx;
				border-radius: 18rpx;
				color: #606266;
			}
			.input-doc-b {
				width: 16rpx;
				height: 16rpx;
				background-color: #FF6900;
				border-radius: 50%;
				display: inline-block;
				margin-right: 20rpx;
				box-shadow: 0 0 0 6rpx #f7b2b2;
			}
			
			.input-doc-r {
				width: 16rpx;
				height: 16rpx;
				background-color: #00BD9D;
				border-radius: 50%;
				display: inline-block;
				margin-right: 20rpx;
				box-shadow: 0 0 0 6rpx #a9e08f;
			}
			.input-right {
				display: inline-block;
				color: #909399;
				font-size: 28rpx;
				text-align: center;
				line-height: 110rpx;
				padding-left: 20rpx;
			}
		}
	}
	.qusong-item {
		text-align: center;
		padding-top: 20rpx;
		.icons {
			display: inline-block;
			position: relative;
			top: -30rpx;
			right: -28rpx;
		}

		image {
			width: 90rpx;
			height: 90rpx;
		}
	}
</style>